Newsim- News Portal HTML Template
Created: 05 November 2023
Latest Update: 05 November 2023
Thank you for purchasing our product, Newsim- News Portal HTML Template. If you have
any
question, please feel free to contact us.
Main File Structure
All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Newsim" folder.
You will see 4 directories, css, fonts, images and js.
In the CSS folder that you will find style.css and other styling files the all the other
files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.
Newsim/
| |
| assets
| ├── css/
| | └── bootstrap.min.css
| | └── font-awesome.min.css
| | └── magnific-popup.css
| | └── nice-select.css
| | └── animate.css
| | └── flaticon.css
| | └── responsive.css
| | └── slick.css
| | └── style.css
| |
| |
| |
| |
| |
| ├── js/
| └── jquery-3.6.0.min.js
| └── jquery.magnific-popup.js
| └── bootstrap.min.js
| └── jquery.marquee.min.js
│ └── jquery.nice-select.js
│ └── slick.min.js
│ └── theia-sticky-sidebar.min.js
│ └── wow.min.js
│ └── main.js
│
├── about.html
├── author.html
├── bussiness.html
├── bussiness-02.html
├── cart.html
├── contact.html
├── financial.html
├── index.html
├── index-02.html
├── index-03.html
├── login.html
├── product-details.html
├── products.html
├── signup.html
├── sport.html
Customization
How to Change Site Title And Favicon Icon
How to Change Logo
How to Change Phone Number, E-Mail Address and Address
How to Change Copyright Text
HTML Structure
The base structure was organized by row, col-** class
<!-- Latest News Section Start Here --> <section class="latest-news-section"> <div class="container custom-container"> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="top-sticky-wrapper"> <div class="image-box-item-three"> <div class="thumbnail style-01"> <img src="assets/img/section-img/recent/recent-18.png" alt=""> </div> <div class="content ml-xl-4 ml-sm-6"> <span class="tag-02">business</span> <a href="business-02.html"><h4 class="title">Sub penthouse at for One Bloor goes</h4></a> <ul class="post-meta"> <li> <a href="#">By <span>Admin</span></a> </li> <li> <span class="posted-on"> <a href="#" rel="bookmark"> <span class="entry-date published updated"><i class="fas fa-calendar-alt"></i>JAN 14, 2022</span> </a> </span> </li> </ul> </div> </div> <div class="image-box-item-three"> <div class="thumbnail style-01"> <img src="assets/img/section-img/recent/recent-19.png" alt=""> </div> <div class="content ml-xl-4 ml-sm-6"> <span class="tag-02">business</span> <a href="business-02.html"><h4 class="title">Cava producers are looking good</h4></a> <ul class="post-meta"> <li> <a href="#">By <span>Admin</span></a> </li> <li> <span class="posted-on"> <a href="#" rel="bookmark"> <span class="entry-date published updated"><i class="fas fa-calendar-alt"></i>JAN 14, 2022</span> </a> </span> </li> </ul> </div> </div> <div class="image-box-item-three"> <div class="thumbnail style-01"> <img src="assets/img/section-img/recent/recent-20.png" alt=""> </div> <div class="content ml-xl-4 ml-sm-6"> <span class="tag-02">business</span> <a href="business-02.html"><h4 class="title">Mortgage Rundown The countdown</h4></a> <ul class="post-meta"> <li> <a href="#">By <span>Admin</span></a> </li> <li> <span class="posted-on"> <a href="#" rel="bookmark"> <span class="entry-date published updated"><i class="fas fa-calendar-alt"></i>JAN 14, 2022</span> </a> </span> </li> </ul> </div> </div> <div class="widget widget_social margin-top-40"> <h3 class="widget-headline">STAY CONNECTED<span></span></h3> <ul class="contact_info_list"> <li class="single-info-item"> <div class="icon"> <i class="fab fa-facebook-square"></i> </div> <div class="details"> <p><span>1250M +</span>Followers</p> </div> </li> <li class="single-info-item style-01"> <div class="icon"> <i class="fab fa-twitter-square"></i> </div> <div class="details"> <p><span>1250M +</span>Followers</p> </div> </li> <li class="single-info-item style-02"> <div class="icon"> <i class="fab fa-youtube-square"></i> </div> <div class="details"> <p><span>1250M +</span>Followers</p> </div> </li> <li class="single-info-item style-03"> <div class="icon"> <i class="fab fa-linkedin"></i> </div> <div class="details"> <p><span>1250M +</span>Followers</p> </div> </li> </ul> </div> <div class="image-box-item-seven bg-image" style="background-image: url(assets/img/section-img/news/agreement.png);"> <div class="content"> <h4 class="title">NEWSIM Newspaper</h4> <h6 class="subtitle">WordPress Theme</h6> <div class="btn-wrap desktop-center"> <a href="#" class="boxed-btn buy-btn">Read More</a> </div> </div> </div> </div> </div> <div class="col-lg-8 col-md-6"> <div class="row"> <div class="col-lg-6 col-md-12"> <div class="blog-grid-item-01 margin-bottom-30"> <div class="thumb"> <img src="assets/img/section-img/news/news-16.png" alt=""> </div> <span class="tag absolute">Products</span> <div class="content"> <a href="business-02.html"><h4 class="title">Animal Nation Are Strugling To Save Their Wildlife</h4></a> <ul class="post-meta"> <li> <a href="#">By <span>Admin</span></a> </li> <li> <span class="posted-on"> <a href="#" rel="bookmark"> <span class="entry-date published updated"><i class="fas fa-calendar-alt"></i>JAN 14, 2022</span> </a> </span> </li> </ul> </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="blog-grid-item-01 margin-bottom-30"> <div class="thumb"> <img src="assets/img/section-img/news/news-17.png" alt=""> </div> <span class="tag style-02 absolute">Business</span> <div class="content"> <a href="business-02.html"><h4 class="title">Animal Nation Are Strugling To Save Their Wildlife</h4></a> <ul class="post-meta"> <li> <a href="#">By <span>Admin</span></a> </li> <li> <span class="posted-on"> <a href="#" rel="bookmark"> <span class="entry-date published updated"><i class="fas fa-calendar-alt"></i>JAN 14, 2022</span> </a> </span> </li> </ul> </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="blog-grid-item-01 margin-bottom-30"> <div class="thumb"> <img src="assets/img/section-img/news/news-18.png" alt=""> </div> <span class="tag style-03 absolute">Tech</span> <div class="content"> <a href="business-02.html"><h4 class="title">Animal Nation Are Strugling To Save Their Wildlife</h4></a> <ul class="post-meta"> <li> <a href="#">By <span>Admin</span></a> </li> <li> <span class="posted-on"> <a href="#" rel="bookmark"> <span class="entry-date published updated"><i class="fas fa-calendar-alt"></i>JAN 14, 2022</span> </a> </span> </li> </ul> </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="blog-grid-item-01 margin-bottom-30"> <div class="thumb"> <img src="assets/img/section-img/news/news-19.png" alt=""> </div> <span class="tag style-04 absolute">Travel</span> <div class="content"> <a href="business-02.html"><h4 class="title">Animal Nation Are Strugling To Save Their Wildlife</h4></a> <ul class="post-meta"> <li> <a href="#">By <span>Admin</span></a> </li> <li> <span class="posted-on"> <a href="#" rel="bookmark"> <span class="entry-date published updated"><i class="fas fa-calendar-alt"></i>JAN 14, 2022</span> </a> </span> </li> </ul> </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="blog-grid-item-01 margin-bottom-30"> <div class="thumb"> <img src="assets/img/section-img/news/news-20.png" alt=""> </div> <span class="tag absolute">Products</span> <div class="content"> <a href="business-02.html"><h4 class="title">Animal Nation Are Strugling To Save Their Wildlife</h4></a> <ul class="post-meta"> <li> <a href="#">By <span>Admin</span></a> </li> <li> <span class="posted-on"> <a href="#" rel="bookmark"> <span class="entry-date published updated"><i class="fas fa-calendar-alt"></i>JAN 14, 2022</span> </a> </span> </li> </ul> </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="blog-grid-item-01 margin-bottom-30"> <div class="thumb"> <img src="assets/img/section-img/news/news-21.png" alt=""> </div> <span class="tag style-05 absolute">Food</span> <div class="content"> <a href="business-02.html"><h4 class="title">Animal Nation Are Strugling To Save Their Wildlife</h4></a> <ul class="post-meta"> <li> <a href="#">By <span>Admin</span></a> </li> <li> <span class="posted-on"> <a href="#" rel="bookmark"> <span class="entry-date published updated"><i class="fas fa-calendar-alt"></i>JAN 14, 2022</span> </a> </span> </li> </ul> </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="blog-grid-item-01 margin-bottom-30"> <div class="thumb"> <img src="assets/img/section-img/news/news-22.png" alt=""> </div> <span class="tag absolute">Products</span> <div class="content"> <a href="business-02.html"><h4 class="title">Animal Nation Are Strugling To Save Their Wildlife</h4></a> <ul class="post-meta"> <li> <a href="#">By <span>Admin</span></a> </li> <li> <span class="posted-on"> <a href="#" rel="bookmark"> <span class="entry-date published updated"><i class="fas fa-calendar-alt"></i>JAN 14, 2022</span> </a> </span> </li> </ul> </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="blog-grid-item-01 margin-bottom-30"> <div class="thumb"> <img src="assets/img/section-img/news/news-23.png" alt=""> </div> <span class="tag style-02 absolute">Business</span> <div class="content"> <a href="business-02.html"><h4 class="title">Animal Nation Are Strugling To Save Their Wildlife</h4></a> <ul class="post-meta"> <li> <a href="#">By <span>Admin</span></a> </li> <li> <span class="posted-on"> <a href="#" rel="bookmark"> <span class="entry-date published updated"><i class="fas fa-calendar-alt"></i>JAN 14, 2022</span> </a> </span> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="row justify-content-end"> <div class="col-lg-8"> <div class="blog-pagination desktop-center"> <ul> <li><span>PREV</span></li> <li><a class="page-numbers" href="#">01</a></li> <li><a class="page-numbers current" href="#">02</a></li> <li><a class="page-numbers" href="#">03</a></li> <li><span class="next">NEXT</span></li> </ul> </div> </div> </div> </div> </section> <!-- Latest News Section End Here -->
CSS Structure
The base structure was organized by row, col-** class
/*-------------------------
Icon Box Item
-------------------------*/
.single-icon-box {
background-color: #fff;
text-align: center;
padding: 35px;
position: relative;
z-index: 0;
overflow: hidden;
border-radius: 6px;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
margin-bottom: 30px;
}
.single-icon-box.active {
-webkit-filter: drop-shadow(0 10px 30px rgba(25, 88, 216, 0.12));
filter: drop-shadow(0 10px 30px rgba(25, 88, 216, 0.12));
}
.single-icon-box:hover {
-webkit-filter: drop-shadow(0 10px 30px rgba(25, 88, 216, 0.12));
filter: drop-shadow(0 10px 30px rgba(25, 88, 216, 0.12));
}
.single-icon-box .icon {
width: 75px;
height: 75px;
line-height: 75px;
text-align: center;
background: var(--secondary-color);
border-radius: 6px;
font-size: 35px;
color: #fff;
margin: auto;
margin-bottom: 22px;
}
.single-icon-box .content span {
font-size: 16px;
line-height: 1.6;
font-family: var(--body-font);
font-weight: 500;
color: #161616;
display: block;
}
.image-box-wrapper {
border-bottom: 1px solid #e3e3e3;
padding-bottom: 40px;
margin-bottom: 40px;
}
.image-box-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #fff;
padding: 20px 20px 20px 20px;
border-radius: 6px;
}
.image-box-item.style-01 {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.image-box-item.style-01 .thumbnail img {
border-radius: 6px;
width: 260px;
}
.image-box-item .thumbnail img {
border-radius: 6px;
width: 170px;
}
.image-box-item .content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-left: 30px;
}
.image-box-item .content .title {
font-size: 18px;
line-height: 1.6;
font-family: var(--heading-font);
font-weight: 700;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
color: var(--heading-color);
margin-bottom: 10px;
margin-top: 10px;
transition: 0.3s all ease;
}
.image-box-item .content .title:hover {
color: var(--secondary-color);
}
.image-box-item .content p {
font-size: 16px;
line-height: 1.7;
font-family: var(--body-font);
font-weight: 400;
color: var(--heading-color);
margin-bottom: 10px;
}
.image-box-item .content .price {
color: #fff;
font-size: 28px;
font-weight: 700;
font-family: var(--heading-font);
}
.image-box-item-two {
position: relative;
z-index: 0;
margin-bottom: 30px;
}
.image-box-item-two.style-01 {
margin-left: 15px;
margin-right: 15px;
}
.image-box-item-two.bg-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 0;
min-height: 480px;
border-radius: 6px;
}
.image-box-item-two.bg-image:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
background-size: cover;
z-index: -1;
border-radius: 6px;
}
.image-box-item-two .content {
position: absolute;
left: 40px;
bottom: 40px;
width: calc(100% - 80px);
}
.image-box-item-two .content.style-01 {
left: 30px;
bottom: 30px;
width: calc(100% - 60px);
}
.image-box-item-two .content .title {
font-size: 26px;
line-height: 1.54;
font-family: var(--heading-font);
font-weight: 700;
color: #fff;
margin-top: 10px;
margin-bottom: 3px;
position: relative;
}
.image-box-item-two .content .title a {
padding-bottom: 6px;
background: -webkit-gradient(linear, left top, right top, from(currentColor), to(currentColor));
background: linear-gradient(to right, currentColor 0%, currentColor 100%);
background-size: 0px 2px;
background-repeat: no-repeat;
background-position: left 87%;
display: inline;
-webkit-transition: 0.2s all ease;
transition: 0.2s all ease;
}
.image-box-item-two .content .title a:hover {
color: #fff;
background-size: 100% 2px;
display: inline;
}
.image-box-item-two .content .title.style-01 {
font-size: 21px;
line-height: 1.82;
}
.image-box-item-three {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.image-box-item-three.style-01 + .image-box-item-three {
border-top: 1px solid #e3e3e3;
padding-top: 35px;
margin-top: 35px;
}
.image-box-item-three + .image-box-item-three {
border-top: 1px solid #e3e3e3;
padding-top: 25px;
margin-top: 25px;
}
.image-box-item-three .thumbnail.style-01 img {
border-radius: 6px;
}
.image-box-item-three .thumbnail img {
border-radius: 6px;
}
.image-box-item-three .content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-left: 30px;
}
.image-box-item-three .content.style-01 {
padding-left: 20px;
margin-left: 0;
}
.image-box-item-three .content .title {
font-size: 18px;
line-height: 1.7;
font-family: var(--heading-font);
font-weight: 700;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
color: var(--heading-color);
margin-bottom: 10px;
margin-top: 10px;
transition: 0.3s all ease;
}
.image-box-item-three .content .title:hover {
color: var(--secondary-color);
}
.image-box-item-three .content .price {
color: #fff;
font-size: 28px;
font-weight: 700;
font-family: var(--heading-font);
}
.image-box-item-four {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.image-box-item-four:last-child {
margin-bottom: 30px;
}
.image-box-item-four.style-01 + .image-box-item-four {
border-top: 1px solid #e3e3e3;
padding-top: 38px;
margin-top: 38px;
}
.image-box-item-four + .image-box-item-four {
border-top: 1px solid #e3e3e3;
padding-top: 30px;
margin-top: 30px;
}
.image-box-item-four .thumbnail img {
border-radius: 6px;
}
.image-box-item-four .content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-left: 30px;
}
.image-box-item-four .content .title {
font-size: 18px;
line-height: 1.6;
font-family: var(--heading-font);
font-weight: 700;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
color: var(--heading-color);
margin-bottom: 10px;
margin-top: 10px;
}
.image-box-item-four .content .title:hover {
color: var(--secondary-color);
}
.image-box-item-four .content p {
font-size: 16px;
line-height: 1.75;
font-family: var(--body-font);
font-weight: 400;
color: var(--heading-color);
margin-top: 10px;
margin-bottom: 22px;
}
.image-box-item-four .content .price {
color: #fff;
font-size: 28px;
font-weight: 700;
font-family: var(--heading-font);
}
.image-box-item-five {
position: relative;
z-index: 0;
margin-bottom: 80px;
}
.image-box-item-five.bg-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 0;
min-height: 540px;
border-radius: 6px;
}
.image-box-item-five.bg-image:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#21212100), to(#000000C7)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #21212100 0%, #000000C7 100%) 0% 0% no-repeat padding-box;
background-size: cover;
z-index: -1;
border-radius: 6px;
}
.image-box-item-five.bg-image-02 {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 0;
min-height: 425px;
border-radius: 6px;
margin-left: 15px;
margin-right: 15px;
}
.image-box-item-five.bg-image-02:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#21212100), to(#000000C7)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #21212100 0%, #000000C7 100%) 0% 0% no-repeat padding-box;
background-size: cover;
z-index: -1;
border-radius: 6px;
}
.image-box-item-five.bg-image-03 {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 0;
min-height: 450px;
border-radius: 6px;
}
.image-box-item-five.bg-image-03:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#21212100), to(#000000C7)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #21212100 0%, #000000C7 100%) 0% 0% no-repeat padding-box;
background-size: cover;
z-index: -1;
border-radius: 6px;
}
.image-box-item-five .content {
position: absolute;
left: 40px;
bottom: 40px;
width: calc(100% - 80px);
}
.image-box-item-five .content.style-01 {
left: 30px;
bottom: 30px;
width: calc(100% - 60px);
}
.image-box-item-five .content.style-01 .title {
font-size: 18px;
line-height: 1.67;
}
.image-box-item-five .content .title {
font-size: 26px;
line-height: 1.54;
font-family: var(--heading-font);
font-weight: 700;
color: #fff;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
}
.image-box-item-five .content .title a {
padding-bottom: 6px;
background: -webkit-gradient(linear, left top, right top, from(currentColor), to(currentColor));
background: linear-gradient(to right, currentColor 0%, currentColor 100%);
background-size: 0px 2px;
background-repeat: no-repeat;
background-position: left 87%;
display: inline;
-webkit-transition: 0.2s all ease;
transition: 0.2s all ease;
}
.image-box-item-five .content .title a:hover {
color: #fff;
background-size: 100% 2px;
display: inline;
}
.image-box-item-six {
position: relative;
z-index: 0;
margin-bottom: 30px;
overflow: hidden;
margin-left: 15px;
margin-right: 15px;
}
.image-box-item-six:hover .box-number::before {
width: 100%;
}
.image-box-item-six.bg-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 0;
min-height: 130px;
border-radius: 6px;
}
.image-box-item-six.bg-image::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(33, 33, 33, 0.6);
background-size: cover;
z-index: -1;
border-radius: 6px;
}
.image-box-item-six .content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.image-box-item-six .content .title {
font-size: 16px;
line-height: 2;
font-family: var(--heading-font);
font-weight: 700;
color: #fff;
margin-bottom: 0;
text-transform: uppercase;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.image-box-item-six .box-number {
font-size: 18px;
line-height: 1.4;
font-family: var(--body-font);
font-weight: 700;
color: #fff;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
margin-bottom: 0px;
position: absolute;
right: 15px;
top: 6px;
z-index: 0;
}
.image-box-item-six .box-number::before {
content: "";
position: absolute;
z-index: -1;
right: -50px;
top: -50px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #2962FF;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.image-box-item-seven {
position: relative;
z-index: 0;
margin-bottom: 30px;
}
.image-box-item-seven.bg-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 0;
min-height: 650px;
border-radius: 6px;
}
.image-box-item-seven.bg-image:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
background-size: cover;
z-index: -1;
border-radius: 6px;
}
.image-box-item-seven .content {
position: absolute;
left: 50px;
bottom: 50px;
width: calc(100% - 100px);
}
.image-box-item-seven .content .title {
font-size: 35px;
line-height: 1.54;
font-family: var(--heading-font);
font-weight: 700;
color: #fff;
margin-top: 10px;
margin-bottom: 29px;
text-align: center;
}
.image-box-item-seven .content .subtitle {
font-size: 20px;
line-height: 1.54;
font-family: var(--heading-font);
font-weight: 600;
color: #fff;
margin-top: 10px;
margin-bottom: 27px;
text-align: center;
letter-spacing: 5px;
}
Sources & Credits
Supports
Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support Open Ticket. Thanks.